<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputStylesheet name="./css/AdminLTE.css"/>
        <h:outputStylesheet name="./css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
        <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"/>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
        <h:outputStylesheet name="./css/sidebar.less"/>
        <h:outputStylesheet name="./css/dropdown.less"/>

        <!--         <h:outputStylesheet name="./css/hover.css"/>
                <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'/>-->
        <h:outputScript name="./js/actions.js"/>
        <!--       <h:outputScript name="./js/dashboard.js"/>
                <h:outputScript name="./js/app.js"/>
                <h:outputScript name="./js/bootstrap.min.js"/>-->
        <title>Inventory Manager</title>
    </h:head>

    <h:body class="skin-blue wysihtml5-supported  pace-done">
        <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel" >  
            <f:facet name="start">  
                <h:graphicImage value="./images/loading.gif" width="150" height="100" style="position: absolute;left: 40%;top: 40%;z-index: 1000000;"/>  
            </f:facet>  
            <f:facet name="complete">  
                <h:outputText value="" />  
            </f:facet>  
        </p:ajaxStatus>

        <div id="top" class="top">

            <ui:insert name="top">
                <header class="header">
                    <a href="index.xhtml" class="logo">
                        <!-- Add the class icon to your logo image or logo icon to add the margining -->
                        <h1>Inventory <span class="red">Manager</span></h1>
                    </a>
                    <!-- Header Navbar: style can be found in header.less -->
                    <nav class="navbar navbar-static-top" role="navigation">
                        <!-- Sidebar toggle button-->
                        <a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <div class="navbar-right">
                            <ul class="nav navbar-nav">
                                <!-- Messages: style can be found in dropdown.less-->
                                <li class="dropdown messages-menu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-envelope"></i>
                                        <span class="label label-success">4</span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li class="header">You have 4 messages</li>
                                        <li>
                                            <!-- inner menu: contains the actual data -->
                                            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
                                                    <li><!-- start message -->
                                                        <a href="#">
                                                            <div class="pull-left">
                                                                <img src="img/avatar3.png" class="img-circle" alt="User Image"/>
                                                            </div>
                                                            <h4>
                                                                Support Team
                                                                <small><i class="fa fa-clock-o"></i> 5 mins</small>
                                                            </h4>
                                                            <p>Why not buy a new awesome theme?</p>
                                                        </a>
                                                    </li><!-- end message -->
                                                    <li>
                                                        <a href="#">
                                                            <div class="pull-left">
                                                                <img src="img/avatar2.png" class="img-circle" alt="user image"/>
                                                            </div>
                                                            <h4>
                                                                AdminLTE Design Team
                                                                <small><i class="fa fa-clock-o"></i> 2 hours</small>
                                                            </h4>
                                                            <p>Why not buy a new awesome theme?</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="pull-left">
                                                                <img src="img/avatar.png" class="img-circle" alt="user image"/>
                                                            </div>
                                                            <h4>
                                                                Developers
                                                                <small><i class="fa fa-clock-o"></i> Today</small>
                                                            </h4>
                                                            <p>Why not buy a new awesome theme?</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="pull-left">
                                                                <img src="img/avatar2.png" class="img-circle" alt="user image"/>
                                                            </div>
                                                            <h4>
                                                                Sales Department
                                                                <small><i class="fa fa-clock-o"></i> Yesterday</small>
                                                            </h4>
                                                            <p>Why not buy a new awesome theme?</p>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <div class="pull-left">
                                                                <img src="img/avatar.png" class="img-circle" alt="user image"/>
                                                            </div>
                                                            <h4>
                                                                Reviewers
                                                                <small><i class="fa fa-clock-o"></i> 2 days</small>
                                                            </h4>
                                                            <p>Why not buy a new awesome theme?</p>
                                                        </a>
                                                    </li>
                                                </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 0px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 0px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
                                        </li>
                                        <li class="footer"><a href="#">See All Messages</a></li>
                                    </ul>
                                </li>
                                <!-- Notifications: style can be found in dropdown.less -->
                                <li class="dropdown notifications-menu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-warning"></i>
                                        <span class="label label-warning">10</span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li class="header">You have 10 notifications</li>
                                        <li>
                                            <!-- inner menu: contains the actual data -->
                                            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
                                                    <li>
                                                        <a href="#">
                                                            <i class="ion ion-ios7-people info"></i> 5 new members joined today
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="fa fa-users warning"></i> 5 new members joined
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="#">
                                                            <i class="ion ion-ios7-cart success"></i> 25 sales made
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                            <i class="ion ion-ios7-person danger"></i> You changed your username
                                                        </a>
                                                    </li>
                                                </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 0px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 0px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
                                        </li>
                                        <li class="footer"><a href="#">View all</a></li>
                                    </ul>
                                </li>
                                <!-- Tasks: style can be found in dropdown.less -->
                                <li class="dropdown tasks-menu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-tasks"></i>
                                        <span class="label label-danger">9</span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li class="header">You have 9 tasks</li>
                                        <li>
                                            <!-- inner menu: contains the actual data -->
                                            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 200px;"><ul class="menu" style="overflow: hidden; width: 100%; height: 200px;">
                                                    <li><!-- Task item -->
                                                        <a href="#">
                                                            <h3>
                                                                Design some buttons
                                                                <small class="pull-right">20%</small>
                                                            </h3>
                                                            <div class="progress xs">
                                                                <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                                    <span class="sr-only">20% Complete</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li><!-- end task item -->
                                                    <li><!-- Task item -->
                                                        <a href="#">
                                                            <h3>
                                                                Create a nice theme
                                                                <small class="pull-right">40%</small>
                                                            </h3>
                                                            <div class="progress xs">
                                                                <div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                                    <span class="sr-only">40% Complete</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li><!-- end task item -->
                                                    <li><!-- Task item -->
                                                        <a href="#">
                                                            <h3>
                                                                Some task I need to do
                                                                <small class="pull-right">60%</small>
                                                            </h3>
                                                            <div class="progress xs">
                                                                <div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                                    <span class="sr-only">60% Complete</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li><!-- end task item -->
                                                    <li><!-- Task item -->
                                                        <a href="#">
                                                            <h3>
                                                                Make beautiful transitions
                                                                <small class="pull-right">80%</small>
                                                            </h3>
                                                            <div class="progress xs">
                                                                <div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                                    <span class="sr-only">80% Complete</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li><!-- end task item -->
                                                </ul><div class="slimScrollBar" style="width: 3px; position: absolute; top: 0px; opacity: 0.4; display: block; border-radius: 0px; z-index: 99; right: 1px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 3px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 0px; opacity: 0.2; z-index: 90; right: 1px; background: rgb(51, 51, 51);"></div></div>
                                        </li>
                                        <li class="footer">
                                            <a href="#">View all tasks</a>
                                        </li>
                                    </ul>
                                </li>
                                <!-- User Account: style can be found in dropdown.less -->
                                <li class="dropdown user user-menu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <i class="glyphicon glyphicon-user fa fa-user"></i>
                                        <span>Ahmed Darweesh <i class="caret"></i></span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <!-- User image -->
                                        <li class="user-header bg-light-blue">
                                            <img src="images/leaf.JPG" class="img-circle" alt="User Image"/>
                                            <p>
                                                Ahmed Darweesh - Web Developer
                                                <small>Member since Nov. 2012</small>
                                            </p>
                                        </li>
                                        <!-- Menu Body -->
                                        <li class="user-body">
                                            <div class="col-xs-4 text-center">
                                                <a href="#">Followers</a>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <a href="#">Sales</a>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <a href="#">Friends</a>
                                            </div>
                                        </li>
                                        <!-- Menu Footer-->
                                        <li class="user-footer">
                                            <div class="pull-left">
                                                <a href="#" class="btn btn-default btn-flat">Profile</a>
                                            </div>
                                            <div class="pull-right">
                                                <a href="#" class="btn btn-default btn-flat">Sign out</a>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </header>
            </ui:insert>
        </div>


        <ui:insert name="left">
            <h:form>
                <p:growl id="growl" showDetail="true" />
                <div id="left">
                    <div class="sidebar">
                        <!-- Sidebar user panel -->
                        <div class="user-panel">
                            <div class="pull-left image">
                                <img src="images/leaf.JPG"  class="img-circle" alt="User Image"/>
                            </div>
                            <div class="pull-left info">
                                <p>Hello, Ahmed</p>
                            </div>
                        </div>
                        <!-- search form 
                        <form action="#" method="get" class="sidebar-form">
                            <div class="input-group">
                                <input type="text" name="q" class="form-control" placeholder="Search..."/>
                                <span class="input-group-btn">
                                    <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </form>-->
                        <!-- /.search form -->
                        <!-- sidebar menu: : style can be found in sidebar.less -->

                        <ul class="sidebar-menu">
                            <li class="active">
                                <p:commandLink action="#{screenController.switchScreen('dashboard','index')}" update="container_panel" immediate="true">
                                    <i class="fa fa-dashboard"></i> <span>Dashboard</span>
                                </p:commandLink>
                            </li>
                            <li class="treeview project_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Projects</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('projects','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> projects List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('projects','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Project Reports</p:commandLink></li>
                                </ul>
                            </li>
                            <li class="treeview warehouse_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Warehouse</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('warehouse','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Warehouses List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('warehouse','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Warehouses Reports</p:commandLink></li>
                                </ul>
                            </li>
                            <li class="treeview suplier_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Suppliers</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('suppliers','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Suppliers List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('suppliers','latestPurchase')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Latest Purchases</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('suppliers','distribution')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Distribution of Products</p:commandLink></li>
                                </ul>
                            </li>

                            <li class="treeview buy_order_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Orders</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('buy_order','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Orders List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('buy_order','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Orders Reports</p:commandLink></li>
                                </ul>
                            </li>

                            <li class="treeview inventory_in_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Inventory-In Transactions</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('inventory_in','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Transaction List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('inventory_in','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Transaction Reports</p:commandLink></li>
                                </ul>
                            </li>

                            <li class="treeview inventory_out_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Inventory-Out Transactions</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('inventory_out','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Transaction List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('inventory_out','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Transaction Reports</p:commandLink></li>
                                </ul>
                            </li>


                            <li class="treeview product_menu">
                                <a href="#">
                                    <i class="fa fa-bar-chart-o"></i>
                                    <span>Products</span>
                                    <i class="fa fa-angle-left pull-right"></i>
                                </a>
                                <ul class="treeview-menu">
                                    <li><p:commandLink action="#{screenController.switchScreen('products','index')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Products List</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('products','productHistory')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Product History</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('products','addProduct')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Add Product</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('products','categories')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Categories</p:commandLink></li>
                                    <li><p:commandLink action="#{screenController.switchScreen('products','reports')}" update="container_panel" immediate="true" style="margin-left: 10px;"><i class="fa fa-angle-double-right"></i> Products Reports</p:commandLink></li>

                                </ul>
                            </li>



                        </ul>


                    </div>
                </div>

                <div id="content" class="left_content">

                    <h:panelGroup id="container_panel">

                        <ui:include src="/WEB-INF/pages/#{screenController.screen}/#{screenController.page}.xhtml" >

                        </ui:include>
                    </h:panelGroup>



                </div>
            </h:form>
        </ui:insert>
        <div id="footer">
            <ui:insert name="bottom">
                Inventory Manager
                &reg;2014 .
            </ui:insert>
        </div>

    </h:body>

</html>
